<template>
  <div class="cityselect">
    <ul class="cityselect-content">
      <li class="cityselect-item">
        <div class="cityselect-item-box">
          <a href="javascript:;" class=""><span>北京</span></a>
          <a href="javascript:;" class=""><span>上海</span></a>
          <a href="javascript:;" class=""><span>天津</span></a>
          <a href="javascript:;" class=""><span>重庆</span></a>
          <a href="javascript:;" class=""><span>河北</span></a>
          <a href="javascript:;" class=""><span>山西</span></a>
          <a href="javascript:;" class=""><span>河南</span></a>
          <a href="javascript:;" class=""><span>辽宁</span></a>
          <a href="javascript:;" class=""><span>吉林</span></a>
          <a href="javascript:;" class=""><span>黑龙江</span></a>
          <a href="javascript:;" class=""><span>内蒙古</span></a>
          <a href="javascript:;" class=""><span>江苏</span></a>
          <a href="javascript:;" class=""><span>山东</span></a>
          <a href="javascript:;" class=""><span>安徽</span></a>
          <a href="javascript:;" class=""><span>浙江</span></a>
          <a href="javascript:;" class=""><span>福建</span></a>
          <a href="javascript:;" class=""><span>湖北</span></a>
          <a href="javascript:;" class=""><span>湖南</span></a>
          <a href="javascript:;" class=""><span>广东</span></a>
          <a href="javascript:;" class=""><span>广西</span></a>
          <a href="javascript:;" class=""><span>江西</span></a>
          <a href="javascript:;" class=""><span>四川</span></a>
          <a href="javascript:;" class=""><span>海南</span></a>
          <a href="javascript:;" class=""><span>贵州</span></a>
          <a href="javascript:;" class=""><span>云南</span></a>
          <a href="javascript:;" class=""><span>西藏</span></a>
          <a href="javascript:;" class=""><span>陕西</span></a>
          <a href="javascript:;" class=""><span>甘肃</span></a>
          <a href="javascript:;" class=""><span>青海</span></a>
          <a href="javascript:;" class=""><span>宁夏</span></a>
          <a href="javascript:;" class=""><span>新疆</span></a>
          <a href="javascript:;" class=""><span>台湾</span></a>
          <a href="javascript:;" class=""><span>钓鱼岛</span></a>
          <a href="javascript:;" class=""><span>港澳</span></a>
        </div>
      </li>

      <li class="cityselect-item">
        <div class="cityselect-item-box">
          <a href="javascript:;" class=""><span>东丽区</span></a>
          <a href="javascript:;" class=""><span>和平区</span></a>
          <a href="javascript:;" class=""><span>河北区</span></a>
          <a href="javascript:;" class=""><span>河东区</span></a>
          <a href="javascript:;" class=""><span>河西区</span></a>
          <a href="javascript:;" class=""><span>红桥区</span></a>
          <a href="javascript:;" class=""><span>蓟县</span></a>
          <a href="javascript:;" class=""><span>静海县</span></a>
          <a href="javascript:;" class=""><span>南开区</span></a>
          <a href="javascript:;" class=""><span>塘沽区</span></a>
          <a href="javascript:;" class=""><span>西青区</span></a>
          <a href="javascript:;" class=""><span>武清区</span></a>
          <a href="javascript:;" class=""><span>津南区</span></a>
          <a href="javascript:;" class=""><span>汉沽区</span></a>
          <a href="javascript:;" class=""><span>大港区</span></a>
          <a href="javascript:;" class=""><span>北辰区</span></a>
          <a href="javascript:;" class=""><span>宝坻区</span></a>
          <a href="javascript:;" class=""><span>宁河县</span></a>
          </div>
      </li>

      <li class="cityselect-item">
        <div class="cityselect-item-box">
          <a href="javascript:;" class=""><span>县城内</span></a>
          <a href="javascript:;" class=""><span>广顺镇</span></a>
          <a href="javascript:;" class=""><span>安富镇</span></a>
          <a href="javascript:;" class=""><span>峰高镇</span></a>
          <a href="javascript:;" class=""><span>双河镇</span></a>
          <a href="javascript:;" class=""><span>直升镇</span></a>
          <a href="javascript:;" class=""><span>路孔镇</span></a>
          <a href="javascript:;" class=""><span>清江镇</span></a>
          <a href="javascript:;" class=""><span>仁义镇</span></a>
          <a href="javascript:;" class=""><span>河包镇</span></a>
          <a href="javascript:;" class=""><span>古昌镇</span></a>
          <a href="javascript:;" class=""><span>吴家镇</span></a>
          <a href="javascript:;" class=""><span>观胜镇</span></a>
          <a href="javascript:;" class=""><span>铜鼓镇</span></a>
          <a href="javascript:;" class=""><span>清流镇</span></a>
          <a href="javascript:;" class=""><span>盘龙镇</span></a>
          <a href="javascript:;" class=""><span>远觉镇</span></a>
          <a href="javascript:;" class=""><span>清升镇</span></a>
          <a href="javascript:;" class=""><span>荣隆镇</span></a>
          <a href="javascript:;" class=""><span>龙集镇</span></a>
          </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
.cityselect-content {
  height: 6rem;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.cityselect-item {
  display: block;
  position: relative;
  padding: .12rem;
  width: 33.333333%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.333333%;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff
}

.cityselect-item-box {
    width: 100%;
    height: inherit;
    display: block;
    padding: 0 20px;
    &> a {
      color: #333;
      font-size: 13px;
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 1;

      &::before {
        height: 1px;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        background-image: -webkit-linear-gradient(bottom,#ececec 50%,transparent 0);
        background-image: linear-gradient(0deg,#ececec 50%,transparent 0);
      }
    }
}
</style>

